<template>
  <view class="choose-container">
    <u-radio-group
      v-for="(item, index) in radioList"
      v-model="topValue"
      placement="column"
      @change="groupChange"
    >
      <view class="left">
        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          :key="index"
          :label="item.label"
          :name="item.value"
        >
        </u-radio>
        <text class="label">{{ item.num }} 张</text>
        <view class="right">
          去选择
          <u-icon color="#4c9ffb" size="18" name="arrow-right"></u-icon>
        </view>
      </view>
    </u-radio-group>
    <view class="input">
      <input type="text" class="inputText" v-model="inputValue" />
      天
    </view>
  </view>
</template>
<script>
export default {
  props: {
    radioList: {
      type: Array,
    },
  },
  data() {
    return {
      topValue: "", //置顶选中的
      inputValue: "",
    };
  },
  methods: {
    groupChange(e) {
      this.$emit("groupChange", e);
    },
  },
};
</script>
<style lang="scss" scoped>
.choose-container {
  ::v-deep.u-radio-group {
    margin: 30rpx 0;
  }
  ::v-deep .left {
    display: flex;
    align-items: center;
    .label {
      margin-left: 10rpx;
    }

    .u-radio {
      margin-bottom: 0 !important;
    }
    .right {
      color: #4c9ffb;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      margin-left: 60rpx;
    }
  }
  .input {
    display: flex;
    align-items: center;
    .inputText {
      border-bottom: 1rpx solid #f1f1f1;
      padding-left: 20rpx;
    }
  }
}
</style>
